<template>
	<view class="container" style="padding: 20rpx 30rpx;">
		<view class="w-100 d-flex flex-column">
			<view class="d-flex just-content-center align-items-center">
				<view class="avatar-wrapper">
					<image :src="userInfo.avatar"></image>
					<view class="tag">
						<image src="/static/images/mine/level.png" mode="widthFix"></image>
						<view>{{ userInfo.level }}</view>
					</view>
				</view>
			</view>
			<!-- user box begin -->
			<view class="user-box">
				<view class="d-flex just-content-center text-color-assist font-size-base font-weight-bold mb-30">{{ member.nickname }}</view>
				<!-- user grids begin -->
				<view class="w-100 d-flex font-size-sm text-color-assist mb-30">
					<view class="user-grid" >
						<view class="value">{{ userInfo.couponNum }}</view>
						<view>优惠卷</view>
					</view>
					<view class="user-grid" >
						<view class="value">{{ userInfo.integral }}</view>
						<view>积分</view>
					</view>
					<view class="user-grid" >
						<view class="value">{{ userInfo.total - userInfo.usedCount }}</view>
						<view>会员卡</view>
					</view>
				</view>
				<!-- user grids end -->
				<!-- qrcode begin -->
				<view class="qrcode d-flex just-content-center align-items-center">
					<canvas :style="{ width: qrcodeSize + 'px', height: qrcodeSize + 'px' }"
					 canvas-id="memberCode"></canvas>
				</view>
				<!-- qrcode end -->
				<view class="tips d-flex just-content-center align-items-center">
					<view class="font-size-sm text-color-assist">会员码展示给店员验证入馆</view>
				</view>
				
			</view>
			<!-- user box end -->
		</view>
		<image src="https://dev-1256206693.cos.ap-beijing.myqcloud.com/upload/20210105/4a36d33657677787.png" class="w-100" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	const qrCode = require('@/libs/weapp-qrcode.js');
	export default {
		data() {
			return {
				qrcodeSize: uni.upx2px(260)
			}
		},
		onShow() {
			let params = {
				id:this.userInfo.id,
				type:0//0会员卡使用 1 购卡 2 商品 
			}
			this.makeMemberCode(JSON.stringify(params))
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		methods: {
			makeMemberCode(text) {
				new qrCode('memberCode', {
					text: text,
					width: this.qrcodeSize,
					height: this.qrcodeSize,
					colorDark: '#333333',
					colorLight: '#FFFFFF',
					correctLevel: qrCode.CorrectLevel.H
				});
			}
			// integrals() {
			// 	uni.navigateTo({
			// 		url: '/pages/integrals/integrals'
			// 	})
			// },
			// balance() {
			// 	uni.navigateTo({
			// 		url: '/pages/balance/balance'
			// 	})
			// },
			// coupons() {
			// 	uni.navigateTo({
			// 		url: '/pages/coupons/coupons'
			// 	})
			// }
		}
	};
</script>

<style lang="scss" scoped>
	.avatar-wrapper {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		background-color: #ffffff;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 10;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 100%;
		}

		.tag {
			background-color: #ffffff;
			position: absolute;
			right: -30rpx;
			bottom: -6rpx;
			display: flex;
			align-items: center;
			color: $color-warning;
			font-size: 22rpx;
			padding: 6rpx 16rpx;
			border-radius: 50rem !important;
			box-shadow: 2rpx 2rpx 20rpx rgba($color: #000000, $alpha: 0.1);

			image {
				width: 26rpx;
			}
		}
	}

	.user-box {
		width: 100%;
		position: relative;
		border-radius: 8rpx;
		background-color: #ffffff;
		margin-top: -75rpx;
		padding-top: 105rpx;
		padding-bottom: 75rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	}

	.user-grid {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		&::after {
			content: ' ';
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			border-right: 1rpx solid $text-color-assist;
			transform: scaleX(0.2) scaleY(0.5);
		}

		&:nth-last-child(1)::after {
			border-right: 0;
		}

		.value {
			font-size: $font-size-base;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
	}

	.wepay-btn {
		background-color: #57b737;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5rpx 50rpx;

		image {
			width: 36rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
	.tips {
		margin-top: 40rpx;
	}
</style>
